<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>风景宜人管理后台</title>
    <meta name="keywords" content="微信">
    <meta name="description" content="风景宜人管理后台">
    {!!Html::style('/adminv/css/bootstrap.min.css')!!}
    <link href="/adminv/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Morris -->
    <link href="/adminv/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/adminv/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="/adminv/css/animate.css" rel="stylesheet">
    <link href="/adminv/css/style.css" rel="stylesheet">
    <link href="/layer/skin/layer.css" rel="stylesheet">
    <link href="/layer/skin/layer.ext.css" rel="stylesheet">
    <style>
        .appmsg_col {
            width: 48%;
        }

        .appmsg_col {
            display: inline-block;
            vertical-align: top;
            width: 32%;
            /* text-align: left; */
            /* font-size: 14px; */
            letter-spacing: normal;
        }

        .appmsg {
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid #e7e7eb;
            background-color: #fff;
            color: #666;
        }

        .multi .appmsg_content {
            padding: 0;
        }

        .appmsg_content {
            padding: 0 14px;
            position: relative;
        }

        .appmsg_date {
            font-weight: 400;
            font-style: normal;
        }

        .multi .appmsg_info {
            padding-top: 14px;
            padding-left: 14px;
            padding-right: 14px;
        }

        .appmsg_info {
            font-size: 13px;
            line-height: 20px;
            padding-bottom: 10px;
        }

        .cover_appmsg_item {
            position: relative;
            margin: 0 14px 14px;
        }

        .cover_appmsg_item .appmsg_title {
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.6) !important;
            filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#99000000', endcolorstr='#99000000');
        }

        .cover_appmsg_item .appmsg_title a {
            padding: 8 8px;
            color: #fff;
        }

        .appmsg_thumb_wrp {
            height: 160px;
            overflow: hidden;
        }

        .appmsg_thumb {
            width: 100%;
        }

        .appmsg_item {
            position: relative;
            padding: 20px 14px;
            border-top: 1px solid #e7e7eb;
        }

        .appmsg_item .appmsg_thumb {
            float: right;
            width: 78px;
            height: 78px;
            margin-left: 14px;
        }

        .multi .appmsg_title {
            font-size: 14px;
            padding-top: 0;
        }

        .appmsg_item .appmsg_title {
            line-height: 24px;
            max-height: 48px;
            overflow: hidden;
            margin-top: 23px;
        }

        .appmsg_title a {
            display: block;
            color: #222;
        }

        a {
            color: #459ae9;
            text-decoration: none;
        }

        .appmsg.selected .appmsg_mask {
            display: block;
        }

        .appmsg_mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            filter: alpha(opacity=60);
            -moz-opacity: .6;
            -khtml-opacity: .6;
            opacity: .6;
            z-index: 1;
        }

        .appmsg.selected .icon_card_selected {
            display: inline-block;
        }

        .appmsg .icon_card_selected {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -23px;
            margin-left: -23px;
            line-height: 999em;
            overflow: hidden;
            z-index: 1;
        }

        .icon_card_selected {
            background: url("/image/icon_card_selected.png") no-repeat;
            width: 46px;
            height: 46px;
            vertical-align: middle;
            display: inline-block;
        }
    </style>
</head>

<body>
<div id="wrapper">


    <div class="row">

        <div class="col-lg-12">
            <div class="wrapper wrapper-content animated fadeInRight" id="pjax_load">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>图库列表
                                    <small></small>
                                </h5>

                            </div>
                            <div class="ibox-content grid">
                                @foreach($mediaIdList as $news)
                                <!--一个图文-->
                                <div class="appmsg_col grid-item">
                                    <div>
                                        <div class="appmsg multi" ><!--selected-->
                                            <div class="appmsg_content">
                                                @foreach($news as $k=>$item)
                                                <input type="hidden" class="news_mediaid" value="{{$item['media_id']}}"/>
                                                @if($k==0)
                                                <div class="appmsg_info">
                                                    <em class="appmsg_date">{{date('Y-m-d',$item['update_time'])}}</em>
                                                </div>
                                                <div class="cover_appmsg_item">
                                                    <h4 class="appmsg_title js_title "><a
                                                            href="{{$item['url']}}"
                                                            target="_blank" class="head_title">{{$item['title']}}</a></h4>

                                                    <div class="appmsg_thumb_wrp"><img
                                                            src="{{$item['thumb_pic']}}"
                                                            alt="" class="appmsg_thumb head_img"></div>
                                                </div>
                                                @else
                                                <div class="appmsg_item">
                                                    <img
                                                        src="{{$item['thumb_pic']}}"
                                                        alt="" class="appmsg_thumb">
                                                    <h4 class="appmsg_title js_title"><a
                                                            href="{{$item['url']}}"
                                                            target="_blank" >{{$item['title']}}</a></h4>
                                                </div>
                                                @endif
                                                @endforeach
                                            </div>
                                            <div class="appmsg_mask"></div>
                                            <i class="icon_card_selected">已选择</i>

                                        </div>
                                    </div>
                                </div>

                                <!--一个图文结束-->
                                @endforeach

                            </div>
                            <div class="hr-line-dashed"></div>

                            <div class="form-group ">
                                <div class="col-sm-12">
                                    <?php echo $page->render();?>
                                </div>
                                <div class="col-sm-4">
                                    <button class="btn btn-primary submitmenu comfirm" type="submit">确定</button>
                                    <button class="btn btn-white cancel" type="submit">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>


</div>


<!-- Mainly scripts -->
<script src="/adminv/js/jquery-2.1.1.min.js"></script>
<script src="/adminv/js/bootstrap.min.js@v=3.4.0"></script>
<script src="/adminv/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/adminv/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!---->
<!--<!-- Custom and plugin javascript -->
<script src="/adminv/js/hplus.js@v=2.2.0"></script>
<script src="/adminv/js/plugins/pace/pace.min.js"></script>
<script type="text/javascript" src="/adminv/js/jquery.pjax.js"></script>
<script src="/js/nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/layer/layer.js"></script>
<script type="text/javascript" src="/layer/extend/layer.ext.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<script>
    //截取字符串 包含中文处理
    //(串,长度,增加...)
    function subString(str, len, hasDot)
    {
        var newLength = 0;
        var newStr = "";
        var chineseRegex = /[^\x00-\xff]/g;
        var singleChar = "";
        var strLength = str.replace(chineseRegex,"**").length;
        for(var i = 0;i < strLength;i++)
        {
            singleChar = str.charAt(i).toString();
            if(singleChar.match(chineseRegex) != null)
            {
                newLength += 2;
            }
            else
            {
                newLength++;
            }
            if(newLength > len)
            {
                break;
            }
            newStr += singleChar;
        }

        if(hasDot && strLength > len)
        {
            newStr += "...";
        }
        return newStr;
    }
</script>
<script>
    $(function() {
        $('.grid').masonry({
            itemSelector: '.grid-item',
            percentPosition: true
        });
    });

    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

    // 选中
    $('.grid-item').on('click', function () {
        var $this_pic = $(this).find('.appmsg');
        $this_pic.addClass('selected');

        // 其他同位元素去掉选中效果
        $(this).siblings().find('.appmsg').removeClass('selected');
    });


    $('.cancel').on('click', function () {
        parent.layer.close(index);

    });

    // 点击确定
    $('.comfirm').on('click', function () {
        // 确定有图文被选中
        $checked = $('.ibox-content').find('div').hasClass('selected');
        if ($checked) {

            // 隐藏图片
            parent.$('.uploadpic').hide();
            // 隐藏文本
            parent.$('.replywenben').hide();
            // 类型为news
            parent.$('.type').val('news');
            // 获取图文media_id
            $news_mediaid = $('.selected').find('.news_mediaid').val();

            // 获取图文消息头图
            $picurl = $('.selected').find('.head_img').attr('src');
            // 获取图文的第一个标题
            $head_title = $('.selected').find('.head_title').html();
            $title = subString($head_title,18);
            parent.$('.news').show();
            parent.$('.news_image').attr('data-mediaid', $news_mediaid);
            parent.$('.news_image').attr('src', $picurl);
            parent.$('.news_title').html($title);

            // 关闭窗口
            parent.layer.close(index);
        } else {
            parent.layer.msg('必须选中一个哦', {shade: 0.3})
        }
    });
</script>
</body>

</html>
